<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        textarea {
            width: 400px;
            height: 200px;
            margin: 100px auto;
            margin-left: 500px;
            position: relative;
        }

        button {
            position: absolute;
            bottom: 390px;
        }

        li {
            width: 500px;
            padding: 5px;
            background-color: rgb(209, 245, 218);
            font-size: 14px;
            margin: 5px 0;
        }
           
        ul {
            margin-top: 50px;
            margin-left: 400px;
        }
        
        
    </style>
</head>

<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
    <ul>
        <li>比屋xxxxx</li>
        <li>比屋xxxxx</li>
        <li>比屋xxxxx</li>
    </ul>


    <script>
        /* 
            
         */

         const textObj = document.querySelector("textarea")
         const btnObj = document.querySelector("button")
         const ulObj = document.querySelector("ul")

         btnObj.onclick = function(){
             if(textObj.value.trim().length>3){
                 const liObj = document.createElement("li")
                 liObj.innerText = textObj.value;

                //  ulObj.appendChild(liObj)
                ulObj.insertBefore(liObj,ulObj.children[0]) //将创建的li的内容插入到ul中的第一个元素前面
             }else{
                 alert("内容不够")
             }
         }
         
    </script>

</body>

</html>